<template>
  <!-- 页面布局card通用组件 -->
  <PageCard>
    <TreeGridPage
      title="商品分类"
      ref="goodsCatalogTree"
      :datas="goodsCatalogList"
      :props="{ children: 'children', label: 'catalogName' }"
      @refresh="treeRefresh"
      @treeClick="treeClick"
    >
      <!-- 头部工具栏 -->
      <div slot="toolBar">
        <ToolBar>
          <el-form :model="queryForm" label-width="100px">
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="关键词:">
                  <el-input
                    v-model="queryForm.keyword"
                    placeholder="名称"
                    style="100%;"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="启用状态:">
                  <el-select
                    v-model="queryForm.isEnabled"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in $config.ENABLED_STATUS"
                      :key="Number(index)"
                      :label="item"
                      :value="Number(index)"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-button type="default" @click="loadTableData">查询</el-button>
                <el-button type="default" @click="resetQuery">重置</el-button>
                <el-button
                  type="primary"
                  @click="addInfo"
                  v-show="$btnPermission.verify('AddGoodsInfo')"
                  >新增</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </ToolBar>
      </div>

      <!-- 表格数据 -->
      <div slot="tableGrid">
        <TablePage
          ref="goodsInfoTablePage"
          :customTableHeight="255"
          :loading.sync="loading"
          :table-data="goodsInfoTableDatas"
          :columns="columns"
          @reloadData="loadTableData"
        />
      </div>
    </TreeGridPage>
  </PageCard>
</template>
<script>
import PageCard from "@/components/PageCard/index.vue";
import ToolBar from "@/components/ToolBar/index.vue";
import TablePage from "@/components/TablePage/index.vue";
import TreeGridPage from "@/components/TreeGridPage/index.vue";

import { goodsInfoPage } from "@/api/goods/info";
import { catalogTreeList } from "@/api/goods/catalog";

export default {
  name: "GoodsInfoPage",
  components: {
    PageCard,
    ToolBar,
    TablePage,
    TreeGridPage,
  },
  data() {
    return {
      loading: false,
      queryForm: null,
      initForm: {
        keyword: "",
        catalogId: void 0,
        isEnabled: void 0,
      },
      selectCatalog: {
        id: null,
        name: null,
        path: null,
        children: false,
      },
      goodsInfoTableDatas: [],
      columns: [
        {
          title: "商品编号",
          name: "goodsNo",
          width: 150,
          align: "center",
        },
        {
          title: "商品名称",
          name: "goodsName",
          width: 150,
          align: "center",
        },
        {
          title: "分类",
          name: "catalogName",
          width: 150,
          align: "center",
        },
        {
          title: "备注",
          name: "remark",
          width: 250,
          align: "center",
        },
        {
          title: "启用状态",
          name: "isEnabled",
          width: 150,
          align: "center",
          select: true,
          options: this.$config.ENABLED_STATUS,
        },
        {
          title: "创建人",
          name: "createName",
          width: 150,
          align: "center",
        },
        {
          title: "创建时间",
          name: "createTime",
          width: 250,
          align: "center",
        },
        {
          title: "修改人",
          name: "modifyName",
          width: 150,
          align: "center",
        },
        {
          title: "修改时间",
          name: "modifyTime",
          width: 250,
          align: "center",
        },
        {
          title: "操作",
          name: "operate",
          width: 100,
          operate: [
            {
              name: "编辑",
              fun: this.editGoodsInfo,
              permission: "EditGoodsInfo",
              customStyle: {
                "margin-left": "10px",
              },
            },
          ],
        },
      ],
      goodsCatalogList: [],
    };
  },
  created() {
    this.queryForm = { ...this.initForm };
    this.$nextTick(async () => {
      // 货品分类
      await this.loadGoodsCatalog();

      // 默认选择商品分类
      await this.defaultSelectGoodsCatalog();

      this.loadTableData();
    });
  },
  methods: {
    // 加载货品分类
    async loadGoodsCatalog() {
      const res = await catalogTreeList();
      this.goodsCatalogList = res.data;
      if (this.$route.params.catalogId && this.goodsCatalogList) {
        const selectCatalogId = this.$route.params.catalogId;
        this.goodsCatalogList.forEach((item) => {
          if (item.id === selectCatalogId) {
            this.treeClick(item);
          }
        });
      }
    },

    // 默认选择商品分类
    defaultSelectGoodsCatalog() {
      const catalogId = this.$route.params.catalogId;
      if (!catalogId) return;
      this.$nextTick(() => {
        this.$refs.goodsCatalogTree.setDefaultSelectNode(catalogId);
      });
    },

    // 刷新商品分类
    async treeRefresh() {
      this.$route.params.catalogId = void 0;
      await this.loadGoodsCatalog();
      await this.treeClick();
    },

    // 点击商品分类
    async treeClick(e) {
      this.queryForm.catalogId = void 0;
      this.selectCatalog.id = void 0;
      if (e) {
        this.$refs.goodsCatalogTree.setDefaultSelectNode(e.id);
        this.queryForm.catalogId = e.id;
        this.selectCatalog.id = e.id;
        this.selectCatalog.name = e.catalogName;
        this.selectCatalog.path = e.path;
        if (e.children) {
          this.selectCatalog.children = !e.children && e.children.length <= 0;
        } else {
          this.selectCatalog.children = true;
        }
      }
      this.loadTableData();
    },

    // 加载数据
    async loadTableData() {
      this.loading = true;
      const { pageNumber, pageSize } = this.$refs.goodsInfoTablePage.page;
      const res = await goodsInfoPage({ pageNumber, pageSize, ...this.queryForm });
      this.$refs.goodsInfoTablePage.page.pageNumber = res.data.pageNumber;
      this.$refs.goodsInfoTablePage.page.pageSize = res.data.pageSize;
      this.$refs.goodsInfoTablePage.page.total = res.data.total;
      this.goodsInfoTableDatas = res.data.rows;
      this.loading = false;
    },

    // 重置查询
    resetQuery() {
      this.queryForm = this.initForm;
      this.loadTableData();
    },

    // 新增
    addInfo() {
      if (!this.selectCatalog.id) {
        this.$message.error("请选择商品分类");
        return;
      }
      if (!this.selectCatalog.children) {
        this.$message.error("请选择最低级");
        return;
      }
      this.$router.push({
        name: "GoodsInfoDetailPage",
        params: {
          catalogId: this.selectCatalog.id,
        },
      });
    },

    // 编辑
    editGoodsInfo(row) {
      if (!row) return;

      this.$router.push({
        name: "GoodsInfoDetailPage",
        params: {
          catalogId: this.selectCatalog.id,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
